.BackStage
{
    width           : 100%;
    min-height      : 100vh;
    overflow        : auto;
    background-color: #f0f2f5;
    display: flex;
    main
    {
        width         : 100%;
        height        : 100vh;
        overflow      : auto;
        display       : flex;
        flex-direction: column;
        .Headers
        {
            width           : 100%;
            height          : 50px;
            box-shadow      : 0 1px 4px rgba(1, 1, 1, .3) ;
            background-color: white;
            display         : flex;
            flex-direction  : row;
            justify-content : space-between;
            align-items     : center;
            .HeadersOptions
            {
                width          : 300px;
                height         : 100%;
                box-sizing     : border-box;
                padding-right  : 30px;
                display        : flex;
                justify-content: space-around;
                align-items    : center;
            }
        }
        .MainContent
        {
            width   : 100%;
            height  : 100%;
            overflow: auto;
        }
    }
    .Aside
    {
        max-width : 230px;
        min-height: 100vh;
        overflow  : hidden;
        .AppIconTitle
        {
            width          : 100%;
            box-sizing     : border-box;
            padding        : 10px 15px;
            justify-content: flex-start;
            >span{
                margin-left: 15px;
            }
        }
    }
}
.AdminConsult
{
    width         : 100%;
    height        : 100%;
    padding       : 20px;
    display       : flex;
    flex-direction: row;
    .ConsultSide
    {
        width         : 400px;
        height        : 100%;
        margin-right  : 30px;
        display       : flex;
        flex-direction: column;
        .ConsultSearch
        {
            width           : 100%;
            border-radius   : 30px;
            height          : 50px;
            margin-bottom   : 20px;
            background-color: white;
            display         : flex;
            align-items     : center;
            padding         : 0 20px;
        }
        .ConsultUserList
        {
            width           : 100%;
            background-color: white;
            border-radius   : 15px;
            height          : 100%;
            padding         : 0 10px;
            .SwitchUserConsult
            {
                width           : 100%;
                height          : 50px;
                border-radius   : 25px;
                background-color: white ;
                display         : flex;
                flex-direction  : row;
                align-items     : center;
                justify-content : space-between;
                font-size       : 12px;
                margin          : 10px 0px;
                padding         : 0 20px;
                &:hover{
                    background-color: #f0f2f5;
                }
            }
        }
    }
    .ConsultContent
    {
        width           : 100%;
        height          : 100%;
        background-color: white;
        border-radius   : 10px;
        display         : flex;
        flex-direction  : column;
        .ContentArea
        {
            width     : 100%;
            height    : 100%;
            overflow-y: auto;
            padding: 20px;
            &::-webkit-scrollbar{
                width: 0;
            }
            >audio{
                display: none;
            }
            ul >li{
                clear        : both;
                box-sizing   : border-box;
                padding      : 10px;
                margin-bottom: 10px;
                max-width    : 250px;
            }
            .MyMessage{
                float           : right;
                border-radius   : 10px 0 10px 10px;
                background-color: rgb(57, 106, 255);
                color           : white;
            }
            .OtherMessage{
                float           : left;
                border-radius   : 0 10px 10px 10px;
                background-color: rgb(234, 240, 246);
            }
            .SystemMessage{
                font-size: 14px;
                color    : rgb(123, 152, 182);
            }
            .VoiceIcon{
                font-family: 'FontAwesome';
                box-sizing : border-box;
                padding    : 10px 40px;
                &::before{
                    content:"\f028";
                }
            }
            .HouseMessage{
                display       : flex;
                flex-direction: column;
                >div{
                    display        : flex;
                    flex-direction : column;
                    justify-content: space-around;
                    user-select    : none;
                    cursor         : pointer;
                    margin-top     : 10px;
                    >p{
                        margin: 0;
                    }
                    & >p:nth-child(1){
                        font-weight: bold;
                        font-size  : 16px;
                    }
                    & >p:nth-child(3){
                        font-size  : 16px;
                        color      : #fe615a;
                    }
                }
            }
        }
        .InputArea
        {
            width     : 100%;
            height    : 90px;
            padding   : 10px;
            padding   : 30px 30px 10px 30px;
            border-top: 1px solid #f0f2f5;
            position  : relative;
            & button:nth-child(1)
            {
                position  : absolute;
                left      : 40px;
                z-index   : 999;
                top       : 50%;
                margin-top: -8px;
            }
            >input{
                background-color: #f0f2f5;
                width           : 90%;
                height          : 100%;
                border          : none;
                outline         : none;
                border-radius   : 30px;
                box-sizing      : border-box;
                padding         : 5px;
                padding-left    : 50px;
                font-size       : 17px;
                &::placeholder{
                    color: rgb(123, 152, 182);
                }
            }
        }
    }
}
.HouseMaintain
{
    width  : 100%;
    height : 100%;
    padding: 20px;
    .TableOptions
    {
        width         : 100%;
        height        : 50px;
        background    : white;
        display       : flex;
        align-items   : center;
        flex-direction: row-reverse;
        >button
        {
            margin-right: 20px;
        }
    }
    .ant-table-wrapper
    {
        table{
            *{
                transition: all .3s ease;
            }
        }
    }

}
.ant-modal-body
{
    max-height: 500px;
    overflow  : auto;
}
.UpdateHouseListDataPanel
{
    width     : 100%;
    .AlterFacility
    {
        width           : 100%;
        height          : 160px;
        display         : flex;
        flex-direction  : row;
        flex-wrap       : wrap;
        justify-content: space-between;
        >div
        {
            margin-right: 35px;
        }
    }
    .SetHousePosition
    {
        width        : 100%;
        height       : 400px;
        position     : relative;
        box-sizing   : border-box;
        margin-bottom: 10px;
    }
}
